@include treelist-ui(
    $ui: 'navigation',
    $padding: 0 10px,

    // Black-ish background color
    $background-color: $panel-navigation-background-color,
    $toolstrip-background-color: #001529,

    $tool-float-indicator-color: $panel-header-background-color,
    $tool-float-indicator-width: 5px,

    $tool-indicator-selected-color: $panel-header-background-color,
    $tool-indicator-selected-width: 5px,
    $tool-selected-background-color: mix(white, $panel-navigation-background-color, 10%),
    //$tool-selected-color: #fff,
    //$tool-selected-background-color: $panel-header-background-color,

    // Darker background for expanded subtrees
    $item-expanded-background-color: #000c17,

    // Taller line height
    $item-line-height : $panel-navigation-item-line-height,

    $row-over-background-color: mix(white, $panel-navigation-background-color, 5%),
    $row-selected-background-color: mix(white, $panel-navigation-background-color, 10%),

    // Off-white text
    $item-icon-color: $panel-navigation-item-text-color,
    $item-expander-color: #fff,
    $item-text-color: #ffffffa6/*#ADB3B8*/,

    // Brighter when hovered
    $item-icon-over-color: #fff,
    $item-expander-over-color: #fff,
    $item-text-over-color: mix(white, $panel-navigation-item-text-color, 50%),
    $item-text-font-size: 13px,

    // Various sizes for the pieces:
    $item-icon-font-size: 18px,
    $item-icon-width: 44px,
    $item-expander-font-size: 16px,
    $item-expander-width: 24px,

    // Style the "row indicator" (the vertical stripe on the left edge):
    $row-indicator-width: 5px,
    $row-indicator-selected-color: $panel-header-background-color,
    $row-indicator-selected-over-color: lighten($panel-header-background-color, 7%),
    $row-indicator-over-color: transparent
);

//--------------------------------------------------------
// Create classes for full-size responsive items

.big-100 {
    /*@include responsivecolumn-item(100%);*/
}

.big-60 {
    /*@include responsivecolumn-item(60%);*/
}

.big-50 {
    /*@include responsivecolumn-item(50%);*/
}

.big-40 {
    /*@include responsivecolumn-item(40%);*/
}

.big-33 {
    /*@include responsivecolumn-item(33.33%);*/
}

.big-20 {
    /*@include responsivecolumn-item(20%);*/
}

//--------------------------------------------------------
// And classes for small-size responsive items

 .x-responsivecolumn-small {
     > .small-100 {
         /*@include responsivecolumn-item(100%);*/
     }

     > .small-50 {
         /*@include responsivecolumn-item(50%);*/
     }
}

//--------------------------------------------------------

.sencha-logo {
    background-color: #002140;
    height: 65px;

    font-size: 16px;
    color: $lightest-color;
    margin-left: 17px;

    .main-logo {
        line-height: 65px;
        img{
            margin-left: 22px;
            margin-right: 22px;
            top: 8px;
            position: relative;
        }
    }
}
/* 数据查询门户使用 */
.searchProtal-logo {
    background-color: #ffffff;
    height: 65px;

    font-size: 23px;
    font-weight: 600;
    color: #000;
    margin-left: 17px;

    .searchProtal-main-logo {
        line-height: 65px;
        img{
            margin-left: 22px;
            margin-right: 22px;
       		width: 33px;
            top: 8px;
            position: relative;
        }
    }
}

.sencha-dash-dash-headerbar {
    padding:0 30px 0 0;
    position:fixed;
    width:100%;
    z-index:10;
    border:none;
    .header-right-profile-image {
        border-radius: 20px;
    }
}
.top-english-button{
    .x-btn-icon-el{
        width:21px;
        height:14px;
    }
}
.collapsed{
    .hot-icon,.new-icon{
        &:after{
            display:none;
        }
    }
    .x-tree-elbow-img{
        display:none;
    }

    .x-tree-node-text {
        display:none;
    }
}
.x-grid-cell{
    position:relative;
}
.hot-icon,.new-icon{
    &.hot-icon:after{
        content: "HOT";
        background:#e3495a;
    }
    &.new-icon:after{
        content: "NEW";
        background:$base-color;
    }
    &:after{
        height: 18px;
        width: 34px;
        display: inline-block;
        position: absolute;
        top: 22px;
        right: -180px;
        text-align:center;
        color: $lightest-color;
        font-weight: bold;
        font-size: 10px;
        line-height: 18px;
    }
}

.x-treelist-item-tool {
    height: $panel-navigation-item-line-height;
    &.hot-icon:after, &.new-icon:after{
        background: $panel-header-background-color;
        content: '';
    }
}

.toolbar-btn-shadow{
    @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    .x-btn-over{
        background-color: $button-toolbar-hover-background-color;
    }
}

//Add border around html editor field
.x-html-editor-input{
    border:1px solid #ccc;
}

.delete-focus-bg {
    &:focus, &:hover{
        background: none;
    }
}

//UI Styles for buttons
@include extjs-button-small-ui(
    $ui: 'soft-blue',
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-blue',
    $line-height: 34px,
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-blue',
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);

@include extjs-button-small-ui(
    $ui: 'soft-text-blue',
    $color:$color-soft-blue,
    $background-color: #fff,
    $border-color: #fff
);
@include extjs-button-large-ui(
    $ui: 'soft-text-blue',
    $color:$color-soft-blue,
    $background-color: #fff,
    $border-color: #fff
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-text-blue',
    $color:$color-soft-blue,
    $background-color: #fff,
    $border-color: #fff
);


@include extjs-button-small-ui(
    $ui: 'soft-cyan',
    $background-color: $color-soft-cyan,
    $border-color: darken($color-soft-cyan, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-cyan',
    $background-color: $color-soft-cyan,
    $border-color: darken($color-soft-cyan, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-green',
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-green',
    $line-height: 34px,
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-green',
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);

@include extjs-button-small-ui(
    $ui: 'soft-unifiedLogin',
    $background-color: $color-soft-unifiedLogin,
    $border-color:darken($color-soft-unifiedLogin, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-unifiedLogin',
    $line-height: 34px,
    $background-color: $color-soft-unifiedLogin,
    $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-unifiedLogin',
    $background-color: $color-soft-unifiedLogin,
    $border-color:darken($color-soft-green, 5%)
);

@include extjs-button-small-ui(
    $ui: 'soft-danger',
    $background-color: $color-soft-danger,
    $border-color:darken($color-soft-danger, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-danger',
    $line-height: 34px,
    $background-color: $color-soft-danger,
    $border-color:darken($color-soft-danger, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-danger',
    $background-color: $color-soft-danger,
    $border-color:darken($color-soft-danger, 5%)
);





@include extjs-button-small-ui(
    $ui: 'soft-red',
    $background-color: $color-soft-red,
    $border-color:darken($color-soft-red, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-red',
    $background-color: $color-soft-red,
    $border-color:darken($color-soft-red, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-purple',
    $background-color: $color-soft-purple,
    $border-color:darken($color-soft-purple, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-purple',
    $background-color: $color-soft-purple,
    $border-color:darken($color-soft-purple, 5%)
);


@include extjs-button-small-ui(
    $ui: 'gray',
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);
@include extjs-button-large-ui(
    $ui: 'gray',
    $line-height: 34px,
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'gray',
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);

@include extjs-button-small-ui(
    $ui: 'green',
    $background-color: $color-green,
    $border-color:darken($color-green, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'green',
    $background-color: $color-green,
    $border-color:darken($color-green, 5%)
);


@include extjs-button-small-ui(
    $ui: 'blue',
    $background-color: $color-blue,
    $border-color:darken($color-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'blue',
    $background-color: $color-blue,
    $border-color:darken($color-blue, 5%)
);

@include extjs-button-small-ui(
    $ui: 'href',
    $background-color: #0000,
    $border-color:darken(#0000, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'href',
    $background-color: #0000,
    $border-color:darken(#0000, 5%)
);

@include extjs-button-small-ui(
        $ui: 'mainViewMenu',
        $background-color: #1b353d,
        $color:#ffffff,
        $border-width:0px,
        $font-weight:600,
        $border-color:darken(#1b353d, 5%)
);
@include extjs-button-toolbar-small-ui(
        $ui: 'mainViewMenu',
        $background-color: #1b353d,
        $color:#ffffff,
        $border-width:0px,
        $font-weight:600,
        $border-color:darken(#1b353d, 5%)
);

@include extjs-text-field-ui(
	$ui: 'notHaveBottomBorder',
	$ui-border-width : 0
);
.notHaveBottomBorder_cls{
	border-bottom: 1px solid #e8e8e8
}

@include extjs-panel-ui(
	$ui : 'radiusPanelBorder',
	$ui-border-radius : 4px
);
/* 底部版权信息 */
.layout-footer{
	background: #f6f6f6;
	padding: 24px 50px;
	color: rgba(0,0,0,.65);
	font-size: 14px;
}
.globalFooter{
	padding: 0 16px;
	margin: 48px 0 24px;
	text-align: center;
}
.globalFooter .mylinks a:not(:last-child){
	margin-bottom: 8px;
	margin-right: 40px;
}
.mylinks a{
	color: rgba(0,0,0,.45);
	-webkit-transition: all .3s;
	transition: all .3s;
	text-decoration: none;
}
.copyright{
	color: rgba(0,0,0,.45);
	font-size: 14px;
}

/* tabpanel样式 */
@include extjs-tab-panel-ui(
    $ui: 'navigation',
	
	$ui-strip-height: $tabbar-strip-height,
    $ui-strip-border-width: $tabbar-strip-border-width,
    $ui-strip-border-color: $tabbar-strip-border-color,
    $ui-strip-background-color: $tabbar-strip-background-color,
	
    $ui-tab-background-color: #fff,
    $ui-tab-background-color-over: #fff,
    $ui-tab-background-color-active: #fff,
    $ui-tab-background-gradient: 'none',
    $ui-tab-background-gradient-over: 'none',
    $ui-tab-background-gradient-active: 'none',
    $ui-tab-color: #c9c9c9,
    $ui-tab-color-over: #c4c4c4,
    $ui-tab-color-active: #63a1ff,
    $ui-tab-glyph-color: #acacac,
    $ui-tab-glyph-color-over: #c4c4c4,
    $ui-tab-glyph-color-active: #63a1ff,
    $ui-tab-glyph-opacity: 1,
    $ui-tab-border-radius: 0,
    $ui-tab-border-color: #fff,
    $ui-tab-border-color-over: #fff,
    $ui-tab-border-width: 0px,
    $ui-tab-inner-border-width: 0,
    $ui-tab-padding: 24px,
    $ui-tab-margin: 0,
    $ui-tab-font-size: 15px,
    $ui-tab-font-size-over: 15px,
    $ui-tab-font-size-active: 15px,
    $ui-tab-line-height: 19px,
    $ui-tab-font-weight: lighter,
    $ui-tab-font-weight-over: lighter,
    $ui-tab-font-weight-active: lighter,
    $ui-tab-icon-width: 24px,
    $ui-tab-icon-height: 24px,
    $ui-bar-background-color: #fff,
    $ui-bar-background-gradient: 'none',
    $ui-bar-padding: 0,
    $ui-strip-height: 0
);